<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="true" @searchHandler="searchHandler">
        <f-search-form-item label="版本" name="ver" slot="advanced"/>
        <f-search-form-item label="数据种类" name="planType" type="select" :data="dataKindData" :showAll="true" slot="advanced"/>
        <f-search-form-item label="版本计划(材料/分包)" name="type" slot="advanced"/>
        <f-search-form-item label="指令号" name="instructNumber" slot="advanced"/>
        <f-search-form-item label="项目编码" name="projectCode" @keypress.native.enter="onEnterPress"/>
        <f-search-form-item label="项目名称" name="projectName" @keypress.native.enter="onEnterPress"/>
        <f-search-form-item label="起算开始月份" name="calDateBe" type="month"/>
        <f-search-form-item label="起算截至月份" name="calDateAf" type="month"/>
        <f-search-form-item label="专业名称" name="majorName" slot="advanced"/>
        <f-search-form-item label="专业编码" name="majorCode" slot="advanced"/>
        <f-search-form-item label="工程包名称" name="packageName" slot="advanced"/>
        <f-search-form-item label="工程包代码" name="packageNo" slot="advanced"/>
        <f-search-form-item label="材料WBS代码" name="materialWbsCode" slot="advanced"/>
        <f-search-form-item label="全物料代码" name="materialCode" slot="advanced"/>
        <f-search-form-item label="设备、材料名称" name="materialName" slot="advanced"/>
        <!-- <f-search-form-item label="型号/规格" name="materiaSpecs" slot="advanced"/> -->
        <f-search-form-item label="项目名称" name="materiaSpecs" slot="advanced"/>
        <f-search-form-item label="材料项目描述" name="materialDesc" slot="advanced"/>
        <f-search-form-item label="技术参数或技术说明" name="technicalData" slot="advanced"/>
        <f-search-form-item label="服务WBS代码" name="serviceWbsCode" slot="advanced"/>
        <f-search-form-item label="服务代码" name="serviceCode" slot="advanced"/>
        <f-search-form-item label="科目名称" name="subjectName" slot="advanced"/>
        <f-search-form-item label="分承包发包项目描述" name="packageDesc" slot="advanced"/>
        <f-search-form-item label="层级号" name="levelNo" slot="advanced"/>
        <f-search-form-item label="对外合同清单描述" name="contractDesc" slot="advanced"/>
        <f-search-form-item label="分区域" name="materialArea" slot="advanced"/>
        <f-search-form-item label="分系统" name="materialUse" slot="advanced"/>
        <f-search-form-item label="损耗" name="loss" slot="advanced"/>
        <f-search-form-item label="品牌" name="brandName" slot="advanced"/>
        <f-search-form-item label="备注" name="remark" slot="advanced"/>
      </f-search-form>
      <f-table ref="table" rowKey="undefined"
               :exportBtn="true"
               :multiple="false"
               :operator="operator"
               :scroll="{ x: 1300, y: 500 }"
               :params="queryParam" :api="api.reportForMaster"
               :showSetting="true"
               :showTotal="false"
               :tableColumns="columns">
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`Search ${column.dataIndex}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            Search
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
            Reset
          </a-button>
        </div>
        <a-icon
          slot="filterIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <template slot="customRender" slot-scope="text, record, index, column">
          <span v-if="searchText && searchedColumn === column.dataIndex">
            <template
              v-for="(fragment, i) in text
                .toString()
                .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
            >
              <mark
                v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                :key="i"
                class="highlight"
              >{{ fragment }}</mark
              >
              <template v-else>{{ fragment }}</template>
            </template>
          </span>
          <template v-else>
            {{ text }}
          </template>
        </template>
        <span slot="dataKind" slot-scope="dataKind">
          {{ dataKind === '' ? '期初数据' : dataKind === '1' ? '修正变更' : '追加变更' }}
        </span>
      </f-table>
      <reportForMaster-drawer ref="drawer"></reportForMaster-drawer>
    </a-card>
  </div>
</template>
<script>
  import reportForMasterDrawer from './reportForMaster_drawer.vue'
  import api from './js/api'

  export default {
    name: 'TableList',
    components: {
      reportForMasterDrawer
    },
    data() {
      const me = this
      //操作按钮
      const operator = []
      return {
        api: Object.assign(api, this.api),
        dataKindData: [{ label: '期初数据', value: '' }, { label: '修正变更', value: 1 }, { label: '追加变更', value: 2 }],
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          // {
          //   title: '#',
          //   width: '60',
          //   align: 'center',
          //   customRender: (text, record, index) => index + 1
          // },
          {
            title: '版本',
            align: 'center',
            dataIndex: 'ver',
            width: 60,
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '版本种类',
            align: 'center',
            dataIndex: 'type',
            width: 80,
            sorter: (a, b) => a.type.length - b.type.length
          },
          {
            title: '数据区分',
            align: 'center',
            dataIndex: 'dataKind',
            scopedSlots: { customRender: 'dataKind' },
            width: 120,
            sorter: (a, b) => a.dataKind.length - b.dataKind.length
          },
          {
            title: '指令号',
            align: 'center',
            dataIndex: 'instructNumber',
            width: 100,
            sorter: (a, b) => a.instructNumber.length - b.instructNumber.length
          },
          // {
          //   title: '',
          //   align: 'center',
          //   dataIndex: 'planType'
          // },
          {
            title: '项目编码',
            align: 'center',
            dataIndex: 'projectCode',
            width: 150,
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName',
            width: 310,
            sorter: (a, b) => a.projectName.length - b.projectName.length
          },
          {
            title: '专业名称',
            align: 'center',
            dataIndex: 'majorName',
            width: 150,
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '专业代码',
            align: 'center',
            dataIndex: 'majorCode',
            width: 100,
            sorter: (a, b) => a.majorCode.length - b.majorCode.length
          },
          {
            title: '工程包名称',
            align: 'center',
            dataIndex: 'packageName',
            width: 100,
            sorter: (a, b) => a.packageName.length - b.packageName.length
          },
          {
            title: '工程包代码',
            align: 'center',
            dataIndex: 'packageNo',
            width: 100,
            sorter: (a, b) => a.packageNo.length - b.packageNo.length
          },
          {
            title: '材料WBS代码',
            align: 'center',
            dataIndex: 'materialWbsCode',
            width: 200,
            sorter: (a, b) => a.materialWbsCode.length - b.materialWbsCode.length
          },
          {
            title: '全物料代码',
            align: 'center',
            dataIndex: 'materialCode',
            width: 150,
            sorter: (a, b) => a.materialCode.length - b.materialCode.length
          },
          {
            title: '设备、材料名称',
            align: 'center',
            dataIndex: 'materialName',
            width: 250,
            sorter: (a, b) => a.materialName.length - b.materialName.length
          },
          // {
          //   title: '型号/规格',
          //   align: 'center',
          //   dataIndex: 'materiaSpecs',
          //   width: 100,
          //   sorter: (a, b) => a.materiaSpecs.length - b.materiaSpecs.length
          // },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'materiaSpecs',
            width: 100,
            sorter: (a, b) => a.materiaSpecs.length - b.materiaSpecs.length
          },
          {
            title: '材料项目描述',
            align: 'center',
            dataIndex: 'materialDesc',
            width: 280,
            sorter: (a, b) => a.materialDesc.length - b.materialDesc.length
          },
          {
            title: '技术参数或技术说明',
            align: 'center',
            dataIndex: 'technicalData',
            width: 180,
            sorter: (a, b) => a.technicalData.length - b.technicalData.length
          },
          {
            title: '服务WBS代码',
            align: 'center',
            dataIndex: 'serviceWbsCode',
            width: 150,
            sorter: (a, b) => a.serviceWbsCode.length - b.serviceWbsCode.length
          },
          {
            title: '服务代码',
            align: 'center',
            dataIndex: 'serviceCode',
            width: 100,
            sorter: (a, b) => a.serviceCode.length - b.serviceCode.length
          },
          {
            title: '科目名称',
            align: 'center',
            dataIndex: 'subjectName',
            width: 100,
            sorter: (a, b) => a.subjectName.length - b.subjectName.length
          },
          {
            title: '分承包发包项目描述',
            align: 'center',
            dataIndex: 'packageDesc',
            width: 200,
            sorter: (a, b) => a.packageDesc.length - b.packageDesc.length
          },
          {
            title: '层级号',
            align: 'center',
            dataIndex: 'levelNo',
            width: 100,
            sorter: (a, b) => a.levelNo.length - b.levelNo.length
          },
          {
            title: '对外合同清单描述',
            align: 'center',
            dataIndex: 'contractDesc',
            width: 200,
            sorter: (a, b) => a.contractDesc.length - b.contractDesc.length
          },
          {
            title: '分区域',
            align: 'center',
            dataIndex: 'materialArea',
            width: 100,
            sorter: (a, b) => a.materialArea.length - b.materialArea.length
          },
          {
            title: '分系统',
            align: 'center',
            dataIndex: 'materialUse',
            width: 100,
            sorter: (a, b) => a.materialUse.length - b.materialUse.length
          },
          {
            title: '合同清单工程量',
            align: 'center',
            dataIndex: 'contractBillQuantity',
            width: 110,
            sorter: (a, b) => a.contractBillQuantity.length - b.contractBillQuantity.length
          },
          {
            title: '标前工程量',
            align: 'center',
            dataIndex: 'beforeMarkQuantity',
            width: 100,
            sorter: (a, b) => a.beforeMarkQuantity.length - b.beforeMarkQuantity.length
          },
          {
            title: '100预算成本工程量',
            align: 'center',
            dataIndex: 'costQuantity100',
            width: 150,
            sorter: (a, b) => a.costQuantity100.length - b.costQuantity100.length
          },
          {
            title: '200预算成本工程量',
            align: 'center',
            dataIndex: 'costQuantity200',
            width: 150,
            sorter: (a, b) => a.costQuantity200.length - b.costQuantity200.length
          },
          {
            title: '损耗',
            align: 'center',
            dataIndex: 'loss',
            width: 100,
            sorter: (a, b) => a.loss.length - b.loss.length
          },
          {
            title: '计量单位',
            align: 'center',
            dataIndex: 'measurementUnit',
            width: 100,
            sorter: (a, b) => a.measurementUnit.length - b.measurementUnit.length
          },
          {
            title: '100采购计划量',
            align: 'center',
            dataIndex: 'unitBillQuantity100',
            width: 150,
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '200采购计划量',
            align: 'center',
            dataIndex: 'unitBillQuantity200',
            width: 150,
            sorter: (a, b) => a.unitBillQuantity200.length - b.unitBillQuantity200.length
          },
          // 完成工程量
          {
            title: '完成工程量',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '本月完成工程量',
                align: 'center',
                dataIndex: 'currentFinishMonthCount',
                width: 150
              },
              {
                title: '截止上月完成工程量',
                align: 'center',
                dataIndex: 'lastFinishMonthCount',
                width: 150
              },
              {
                title: '累计完成工程量',
                align: 'center',
                dataIndex: 'totalFinishCount',
                width: 150
              }
            ]
          },
          {
            title: '预算成本（未税）',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '单价',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainPrice',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installPrice',
                    width: 150
                  },
                  {
                    title: '综合单价',
                    align: 'center',
                    dataIndex: 'syntheticalPrice',
                    width: 150
                  }
                ]
              },
              {
                title: '合价',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材费',
                    align: 'center',
                    dataIndex: 'mainAmount',
                    width: 150
                  },
                  {
                    title: '安装费',
                    align: 'center',
                    dataIndex: 'installAmount',
                    width: 150
                  },
                  {
                    title: '合计',
                    align: 'center',
                    dataIndex: 'syntheticalAmount',
                    width: 150
                  }
                ]
              }
            ]
          },
          {
            title: '对外合同单价',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '有合同价（单价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainPrice1',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installPrice1',
                    width: 150
                  },
                  {
                    title: '综合单价',
                    align: 'center',
                    dataIndex: 'syntheticalPrice1',
                    width: 150
                  }
                ]
              },
              {
                title: '拟合同价（单价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainPrice2',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installPrice2',
                    width: 150
                  },
                  {
                    title: '综合单价',
                    align: 'center',
                    dataIndex: 'syntheticalPrice2',
                    width: 150
                  }
                ]
              },
              {
                title: '合同价（单价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainPrice3',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installPrice3',
                    width: 150
                  },
                  {
                    title: '综合单价',
                    align: 'center',
                    dataIndex: 'syntheticalPrice3',
                    width: 150
                  }
                ]
              }
            ]
          },
          {
            title: '对外合同合价',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '有合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainAmount1',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installAmount1',
                    width: 150
                  },
                  {
                    title: '综合合价',
                    align: 'center',
                    dataIndex: 'syntheticalAmount1',
                    width: 150
                  }
                ]
              },
              {
                title: '拟合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainAmount2',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installAmount2',
                    width: 150
                  },
                  {
                    title: '综合合价',
                    align: 'center',
                    dataIndex: 'syntheticalAmount2',
                    width: 150
                  }
                ]
              },
              {
                title: '合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainAmount3',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installAmount3',
                    width: 150
                  },
                  {
                    title: '综合合价',
                    align: 'center',
                    dataIndex: 'syntheticalAmount3',
                    width: 150
                  }
                ]
              }
            ]
          },
          {
            title: '预估总产值',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '有合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainsumPrice1',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installsumPrice1',
                    width: 150
                  },
                  {
                    title: '综合单价',
                    align: 'center',
                    dataIndex: 'contractsumSyntheticalPrice1',
                    width: 150
                  }
                ]
              },
              {
                title: '拟合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainsumPrice2',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installsumPrice2',
                    width: 150
                  },
                  {
                    title: '综合单价',
                    align: 'center',
                    dataIndex: 'contractsumSyntheticalPrice2',
                    width: 150
                  }
                ]
              },
              {
                title: '合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'mainsumPrice3',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'installsumPrice3',
                    width: 150
                  },
                  {
                    title: '综合单价',
                    align: 'center',
                    dataIndex: 'contractsumSyntheticalPrice3',
                    width: 150
                  }
                ]
              }
            ]
          },
          {
            title: '本月实现产值（未税）',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'currentMonthmainPrice',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'currentMonthinstallPrice',
                    width: 150
                  },
                  {
                    title: '合计',
                    align: 'center',
                    dataIndex: 'currentMonthsumPrice',
                    width: 150
                  }
                ]
              }
            ]
          },
          {
            title: '截止上月实现产值（未税）',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'lastMonthmainPrice',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'lastMonthinstallPrice',
                    width: 150
                  },
                  {
                    title: '合计',
                    align: 'center',
                    dataIndex: 'lastMonthsumPrice',
                    width: 150
                  }
                ]
              }
            ]
          },
          {
            title: '累计实现产值（未税）',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '合同价（合价）',
                align: 'center',
                dataIndex: '',
                width: 150,
                children: [
                  {
                    title: '主材价',
                    align: 'center',
                    dataIndex: 'totalMonthmainPrice',
                    width: 150
                  },
                  {
                    title: '安装价',
                    align: 'center',
                    dataIndex: 'totalMonthinstallPrice',
                    width: 150
                  },
                  {
                    title: '合计',
                    align: 'center',
                    dataIndex: 'totalsumPrice',
                    width: 150
                  }
                ]
              }
            ]
          },
          {
            title: '品牌',
            align: 'center',
            dataIndex: 'brandName',
            width: 150
          },
          // 实现比列
          {
            title: '实现比例',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '本月实现比例（%）',
                align: 'center',
                dataIndex: 'realizationRatioThisMonth',
                width: 150
              },
              {
                title: '截至上月实现比例（%）',
                align: 'center',
                dataIndex: 'asOfLastMonthsRealizationRatio',
                width: 170
              },
              {
                title: '累计实现比例（%）',
                align: 'center',
                dataIndex: 'cumulativeRealizationRatio',
                width: 170
              }
            ]
          },
          // 理论产值（未税）
          {
            title: '理论产值（未税）',
            align: 'center',
            dataIndex: '',
            width: 150,
            children: [
              {
                title: '本月实现金额',
                align: 'center',
                dataIndex: 'amountRealizedThisMonth',
                width: 150
              },
              {
                title: '截至上月实现金额',
                align: 'center',
                dataIndex: 'amountRealizedAsOfLastMonth',
                width: 150
              },
              {
                title: '累计实现金额',
                align: 'center',
                dataIndex: 'cumulativeRealizedAmount',
                width: 150
              }
            ]
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark',
            width: 150
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        operator: operator
      }
    },
    created() {
    },
    methods: {
      handleSearch(selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
      },
      handleReset(clearFilters) {
        clearFilters()
        this.searchText = ''
      },
      onEnterPress() {
        this.queryParam.projectCode = this.$refs.searchForm.projectCode
        this.queryParam.projectName = this.$refs.searchForm.projectName
        this.$refs.table.refresh(false, this.queryParam)
      }
      // ,
      // typeChange(val) {
      //   this.detailsParams.planType = val
      // }
    }
  }
</script>
